<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>设备编辑</title>
    {% include 'admin/common/header.html' %}
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">家属编号</label>
                    <div class="layui-input-block">
                        <input type="text" value="{{ prisoner_family.code }}" id="code" name="code" lay-verify="title"
                               autocomplete="off" placeholder="请输入家属编号" class="layui-input">
                        <p id="code-alert" style="color:orangered;"></p>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" autocomplete="off"
                               placeholder="请输入家属姓名" value="{{ prisoner_family.name }}"
                               class="layui-input">
                        <p id="name-alert" style="color:orangered;"></p>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" id="id_number" name="id_number" value="{{ prisoner_family.id_number }}"
                               autocomplete="off"
                               class="layui-input" placeholder="请输入家属身份证号">
                        <p id="id-alert" style="color:orangered;"></p>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select id="gender">
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                            <option value="武装直升机">武装直升机</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" value="{{ prisoner_family.phone }}" name="phone" lay-verify="title"
                               autocomplete="off" placeholder="请输入标题"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">亲属关系</label>
                    <div class="layui-input-block">
                        <select id="relation">
                            <option value="">请选择亲属关系</option>
                            <option value="配偶">配偶</option>
                            <option value="父母">父母</option>
                            <option value="子女">子女</option>
                            <option value="兄弟姐妹">兄弟姐妹</option>
                            <option value="祖父母">祖父母</option>
                            <option value="外祖父母">外祖父母</option>
                            <option value="孙子女">孙子女</option>
                            <option value="外孙子女">外孙子女</option>
                            <option value="其他亲属">其他亲属</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="address_place">
                    <label class="layui-form-label">住址</label>
                    <div class="layui-input-inline" style="width: 110px;">
                        <select name="province" class="province-selector"
                                data-value="{{ prisoner_family.address_province }}">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 110px;">
                        <select name="city" class="city-selector" data-value="{{ prisoner_family.address_city }}">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 110px;">
                        <select name="county" class="county-selector" data-value="{{ prisoner_family.address_county }}">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" id="address" name="address" autocomplete="off"
                               value="{{ prisoner_family.address_detail }}"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" value="{{ prisoner_family.remark }}" name="remark" lay-verify="title"
                               autocomplete="off" placeholder="请输入备注"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关联罪犯</label>
                    <div class="layui-input-block">
                        <select id="prisoner_id" name="prisoner_id" lay-search="">
                            <option value="">选择关联罪犯</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="user-update">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['form', 'jquery', 'area', 'dtree'], function () {
        let form = layui.form
        let area = layui.area
        let $ = layui.jquery
        let prison_id = parseInt({{ prisoner_family.prisoner_id }})
        let code_legal = true
        let name_legal = true
        let id_legal = true
        let address_province = "{{ prisoner_family.address_province }}"
        let address_city = "{{ prisoner_family.address_city }}"
        let address_county = "{{ prisoner_family.address_county }}"
        $('#relation').val("{{ prisoner_family.relation }}")
        $('#gender').val("{{ prisoner_family.sex }}")
        form.render('select')
        area.render({
            elem: '#address_place',
            change: function (res) {
                address_province = res.province
                address_city = res.city
                address_county = res.county
            }
        });
        if (isIdcard($('#id_number').val())) {
            $('#id-alert').text('')
            id_legal = true
            $('#birthday').prop('disabled', true)
            $('#gender').prop('disabled', true)

        }
        $.ajax({
            url: '/admin/prisoners/data?page=1&limit=10000',
            dataType: 'json',
            contentType: 'application/json',
            type: 'GET',
            success: function (result) {
                for (var i = 0; i < result.data.length; i++) {
                    $('#prisoner_id').append(`<option value="${result.data[i].id}">${result.data[i].name}</option>`);
                }
                $('#prisoner_id').val(prison_id)
                form.render('select')
            }
        })
        $('#code').change(function () {
            if (hasEncodeChars($('#code').val())) {
                $('#code-alert').text('编号只能由字母和数字组成')
                code_legal = false
            } else {
                if (this.value == '') {
                    $('#code-alert').text('编号不能为空')
                    code_legal = false
                } else {
                    $('#code-alert').text('')
                    code_legal = true
                }
            }
        })
        $('#name').change(function () {
            var reg = /^([\u4E00-\u9FA5])*$/;
            if ($('#name').val().match(reg)) {
                if ($('#name').val().length < 2) {
                    $('#name-alert').text('姓名长度必须大于等于两个字')
                    name_legal = false
                } else {
                    $('#name-alert').text('')
                    name_legal = true
                }
            } else {
                $('#name-alert').text('姓名只能由中文组成')
            }
        })
        $('#id_number').change(function () {
            if (this.value == '') {
                $('#id-alert').text('')
                id_legal = true
                $('#gender').prop('disabled', false)
            } else {
                if (isIdcard($('#id_number').val())) {
                    $('#id-alert').text('')
                    id_legal = true
                    var gender = getSexByIdNO($('#id_number').val())
                    $('#gender').val(gender)
                    $('#gender').prop('disabled', true)
                } else {
                    $('#id_number').prop('failure', true)
                    $('#id-alert').text('身份证号不合法')
                    id_legal = false
                    $('#birthday').prop('disabled', false)
                    $('#gender').prop('disabled', false)
                }
            }
            form.render('select')
        })

        form.on('submit(user-update)', function (data) {
            if ($('#code').val() == '') {
                layer.msg('编号不能为空', {icon: 2, time: 1000})
                return false
            }
            if (!code_legal) {
                layer.msg('编号不合法', {icon: 2, time: 1000})
                return false
            }
            if ($('#name').val() == '') {
                layer.msg('姓名不能为空', {icon: 2, time: 1000})
                return false
            }
            if (!name_legal) {
                layer.msg('姓名不合法', {icon: 2, time: 1000})
                return false
            }
            if ($('#gender').val() == '') {
                layer.msg('请选择性别', {icon: 2, time: 1000})
                return false
            }
            if ($('#prisoner_id option:selected').val() == '') {
                layer.msg('请选择关联罪犯', {icon: 2, time: 1000})
                return false
            }
            let roleIds = ''
            $('input[type=checkbox]:checked').each(function () {
                roleIds += $(this).val() + ','
            })
            data.field.id = {{ prisoner_family.id }}
                roleIds = roleIds.substr(0, roleIds.length - 1)
            data.field.id = {{ prisoner_family.id }}
                data.field.roleIds = roleIds
            if (address_province == '') {
                data.field.address = "";
            } else {
                data.field.address = address_province + "-" + address_city + "-" + address_county + "-" + $('#address').val();
            }
            data.field.sex = $('#gender').val()
            data.field.relation = $('#relation option:selected').val()
            data.field.prisoner_id = $('#prisoner_id option:selected').val()
            $.ajax({
                url: '/admin/prisoner_family/update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                            parent.layui.table.reload('prisoner_family-table')
                        })
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000})
                    }
                }
            })
            return false
        })

        // 给定一个code，判断其是否合法
        function hasEncodeChars(str) {
            return typeof str == "string" && encodeURI(str) !== str
        }

        // 给定一个身份证号，判断其是否合法
        function isIdcard(value) {
            var sId = value;
            if (sId.length == 15) {
                if (!/^\d{14}(\d|x)$/i.test(sId)) {
                    this.message = "你输入的身份证长度或格式错误";
                    return false;
                } else {
                    sId = sId.substr(0, 6) + '19' + sId.substr(6, 9);
                    sId += getVCode(sId);
                }
            }

            function getVCode(CardNo17) {
                var Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
                var Ai = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                var cardNoSum = 0;
                for (var i = 0; i < CardNo17.length; i++) cardNoSum += CardNo17.charAt(i) * Wi[i];
                var seq = cardNoSum % 11;
                return Ai[seq];
            }

            var aCity = {
                11: "北京",
                12: "天津",
                13: "河北",
                14: "山西",
                15: "内蒙古",
                21: "辽宁",
                22: "吉林",
                23: "黑龙江",
                31: "上海",
                32: "江苏",
                33: "浙江",
                34: "安徽",
                35: "福建",
                36: "江西",
                37: "山东",
                41: "河南",
                42: "湖北",
                43: "湖南",
                44: "广东",
                45: "广西",
                46: "海南",
                50: "重庆",
                51: "四川",
                52: "贵州",
                53: "云南",
                54: "西藏",
                61: "陕西",
                62: "甘肃",
                63: "青海",
                64: "宁夏",
                65: "新疆",
                71: "台湾",
                81: "香港",
                82: "澳门",
                91: "国外"
            };

            var iSum = 0;
            var info = "";
            if (!/^\d{17}(\d|x)$/i.test(sId)) {
                this.message = "你输入的身份证长度或格式错误";
                return false;
            }
            sId = sId.replace(/x$/i, "a");
            if (aCity[parseInt(sId.substr(0, 2))] == null) {
                this.message = "你的身份证地区非法";
                return false;
            }
            var sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
            var d = new Date(sBirthday.replace(/-/g, "/"));
            if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) {
                this.message = "身份证上的出生日期非法";
                return false;
            }
            for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
            if (iSum % 11 != 1) {
                this.message = "你输入的身份证号非法";
                return false;
            }
            return true;
        }

        // 从合法的身份证号中获取生日
        function getBirthdayByIdNO(IdNO) {
            let birthday = "";
            if (IdNO.length == 18) {
                birthday = IdNO.substr(6, 8);
                return birthday.replace(/(.{4})(.{2})/, "$1-$2-");
            } else if (IdNO.length == 15) {
                birthday = "19" + IdNO.substr(6, 6);
                return birthday.replace(/(.{4})(.{2})/, "$1-$2-");
            } else {
                return "";
            }
        }

        // 从合法的身份证号中获取性别
        function getSexByIdNO(IdNO) {
            if (IdNO.length == 18) {
                return parseInt(IdNO.charAt(16)) % 2 == 0 ? "女" : "男";
            } else if (number.length == 15) {
                return parseInt(IdNO.charAt(14)) % 2 == 0 ? "女" : "男";
            } else {
                return "";
            }
        }
    })
</script>
</body>
</html>